<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

    <title>个人资料</title>
    <link href="/lib/layui/css/layui.css" rel="stylesheet"/>
    <link href="/AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
    <link href="/AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">
    <link type="text/css" href="/css/hmstyle.css" rel="stylesheet"/>
    <link href="/css/personal.css" rel="stylesheet" type="text/css">
    <link href="/css/infstyle.css" rel="stylesheet" type="text/css">
    <script src="/AmazeUI-2.4.2/assets/js/jquery.min.js" type="text/javascript"></script>
    <script src="/AmazeUI-2.4.2/assets/js/amazeui.js" type="text/javascript"></script>
    <script src="/layui/layui.js"></script>
    <script src="/js/common.js" type="text/javascript"></script>
</head>

<body>

<th:block th:include="header"/>

<b class="line"></b>
<div class="center">
    <div class="col-main">
        <div class="main-wrap">

            <div class="user-info">
                <!--标题 -->
                <div class="am-cf am-padding">
                    <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">个人资料</strong> / <small>Personal&nbsp;information</small>
                    </div>
                </div>
                <hr/>

                <!--头像 -->
                <div class="user-infoPic">

                    <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                        <i class="layui-icon layui-icon-upload"></i> 单图片上传
                    </button>
                    <div style="width: 100px;">
                        <div class="layui-upload-list">
                            <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 80%; height: 70px;">
                            <div id="ID-upload-demo-text"></div>
                        </div>
                        <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
                            <div class="layui-progress-bar" lay-percent=""></div>
                        </div>
                    </div>

                    <p class="am-form-help">头像</p>

                    <div class="info-m">
                        <div><b>用户名：<i>[[${session.currentUser.username}]]</i></b></div>
                        <div><b>性别：<i>[[${session.currentUser.sex}]]</i></b></div>
                        <div><b>电话：<i>[[${session.currentUser.tel}]]</i></b></div>
                        <div><b>邮箱：<i>[[${session.currentUser.email}]]</i></b></div>
                    </div>
                </div>

                <!--个人信息 -->
                <form class="am-form am-form-horizontal layui-form" id="form1" lay-filter="form1">
                    <div class="info-main">
                        <div class="am-form-group">
                            <label for="username" class="am-form-label">用户名</label>
                            <div class="am-form-content">
                                <input type="text" id="username" name="username" placeholder="username">
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label class="am-form-label">性别</label>
                            <div class="am-form-content sex">
                                <label class="am-radio-inline">
                                    <input type="radio" name="sex" value="男" > 男
                                </label>
                                <label class="am-radio-inline">
                                    <input type="radio" name="sex" value="女" > 女
                                </label>
                                <label class="am-radio-inline">
                                    <input type="radio" name="sex" value="保密" > 保密
                                </label>
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label for="tel" class="am-form-label">电话</label>
                            <div class="am-form-content">
                                <input id="tel" name="tel" placeholder="telephonenumber" type="tel">
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label for="email" class="am-form-label">电子邮件</label>
                            <div class="am-form-content">
                                <input id="email" name="email" placeholder="Email" type="email">
                            </div>
                        </div>

                        <div class="info-btn">
                            <div id="save" class="am-btn am-btn-danger">保存修改</div>
                        </div>
                    </div>
                </form>
            </div>

        </div>
        <th:block th:include="footer"/>
    </div>

    <aside class="menu">
        <ul>
            <li class="person">
                <a href="/information">个人中心</a>
            </li>
            <li class="person">
                <ul>
                    <li class="active"><a href="/information">个人信息</a></li>
                    <li class="active"><a href="/password">安全设置</a></li>
                </ul>
            </li>
            <li class="person">
                <a href="#">我的交易</a>
                <ul>
                    <li><a href="/order">订单管理</a></li>
                </ul>
            </li>


        </ul>

    </aside>
</div>

<script>
    layui.use(["layer", "form", "upload", "element"], function () {
        var layer = layui.layer;
        var $ = layui.jquery;
        var upload = layui.upload;
        var element = layui.element;
        var form = layui.form;


        var uploadInst = upload.render({
            elem: '#ID-upload-demo-btn',
            url: '/attachment/upload', // 实际使用时改成您自己的上传接口即可。
            before: function (obj) {
                // 预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                });

                element.progress('filter-demo', '0%'); // 进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            },
            done: function (res) {
                // 若上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                // 上传成功的一些操作
                // …
                $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
            },
            error: function () {
                // 演示失败状态，并实现重传
                var demoText = $('#ID-upload-demo-text');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            },
            // 进度条
            progress: function (n, elem, e) {
                element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });


        $('#save').on("click", function () {
            var data = form.val("form1");
            console.log(data);
            console.log(data.username)
            console.log(data.username.length)
            console.log(data.sex)
            console.log(data.email)
            console.log(data.tel)
            if(!data.username){
                layer.msg("用户名不能为空！");
                return false;
            }else if(data.username.length<8){
                layer.msg("用户名长度不能少于8！");
                return false;
            }else if(!data.sex){
                layer.msg("请选择您的性别");
                return false;
            }else if(!data.tel){
                layer.msg("手机号不能为空!")
                return false;
            }
            else if(!data.email){
                layer.msg("邮箱不能为空!")
                return false;
            }
            // method="post" action="/personal/saveInformation"


            $.post("/personal/saveInformation", data, function () {
                layer.msg("修改成功，请您重新登录");

            });


            // $("#form1").submit();
            // layer.msg("修改成功！正在重新登陆！");
        });
    });
</script>
</body>

</html>